<template>
    <div class="tou">
        <!-- 条件查询 -->
        <el-form>
            <el-row :gutter="20">
                <el-col :span="6" :offset="0">
                    <el-form-item label="名称：">
                        <el-input v-model="customer.supName" placeholder="请输入名称查询"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="手机号码：">
                        <el-input v-model="customer.supPhonenumber" placeholder="请输入手机号码查询"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="联系电话：">
                        <el-input v-model="customer.supContactnumber" placeholder="请输入联系电话查询"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item>
                        <el-button type="primary" @click="init">查询</el-button>
                        <el-button @click="cz">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 新增和批量操作 -->
         <el-button class="ant-btn ant-btn-primary" v-perm:basic:customer:insert="insert">
            <i class="anticon">
                <svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>
            </i>
            <span style="margin-left: 8px;">
                新增
            </span>
        </el-button>
        <el-button type="" class="ant-btn" @click="removes">
            <i aria-label="图标: delete" class="anticon anticon-delete"><svg viewBox="64 64 896 896" data-icon="delete" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path></svg></i>
            <span style="margin-left: 8px;">
                删除
            </span>
        </el-button>
        <el-button type="" class="ant-btn" @click="modifyTheState(1)">
            <i data-v-0e5d7b57="" aria-label="图标: check-square" class="anticon anticon-check-square"><svg viewBox="64 64 896 896" data-icon="check-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M433.1 657.7a31.8 31.8 0 0 0 51.7 0l210.6-292c3.8-5.3 0-12.7-6.5-12.7H642c-10.2 0-19.9 4.9-25.9 13.3L459 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H315c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i>
            <span style="margin-left: 8px;">
                启用
            </span>
        </el-button>
        <el-button type="" class="ant-btn" @click="modifyTheState(0)">
            <i data-v-0e5d7b57="" aria-label="图标: close-square" class="anticon anticon-close-square"><svg viewBox="64 64 896 896" data-icon="close-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M354 671h58.9c4.7 0 9.2-2.1 12.3-5.7L512 561.8l86.8 103.5c3 3.6 7.5 5.7 12.3 5.7H670c6.8 0 10.5-7.9 6.1-13.1L553.8 512l122.4-145.9c4.4-5.2.7-13.1-6.1-13.1h-58.9c-4.7 0-9.2 2.1-12.3 5.7L512 462.2l-86.8-103.5c-3-3.6-7.5-5.7-12.3-5.7H354c-6.8 0-10.5 7.9-6.1 13.1L470.2 512 347.9 657.9A7.95 7.95 0 0 0 354 671z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></i>
            <span style="margin-left: 8px;">
                禁用
            </span>
        </el-button>
        
        <!-- 表格内容 -->
        <div style="margin-top: 6px;">
            <el-table :data="page.records" 
            border stripe
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" width="60" label="#" align="center"/>
                <el-table-column label="操作" min-width="80" align="center">
                    <template #default="scope">
                        <el-button link type="primary" :row="scope.row" v-perm:basic:customer:update="update">编辑</el-button>
                        <el-popconfirm
                            title="确定删除吗？"
                            placement="top"
                            :hide-after="0"
                            @cancel="onCancel"
                        >
                            <template #reference>
                                <el-button link type="primary">删除</el-button>
                            </template>
                            <template #actions="{ cancel }">
                                <el-button size="small" @click="cancel">取消</el-button>
                                <el-button
                                    type="primary"
                                    size="small"
                                    :row="scope.row" 
                                    v-perm:basic:vendor:remove="remove"
                                >
                                    确定
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="supName" width="120"/> 
                <el-table-column label="联系人" prop="supContacts" width="120"/> 
                <el-table-column label="手机号码" prop="supPhonenumber" /> 
                <el-table-column label="联系电话" prop="supContactnumber" /> 
                <el-table-column label="电子邮箱" prop="supEmail" width="180"/> 
                <el-table-column label="期初应收" prop="supBeginreceipt" /> 
                <el-table-column label="期末应收" prop="supEndreceipt" /> 
                <el-table-column label="税率(%)" prop="supTaxRate" width="100"/>
                <el-table-column label="排序" prop="sort" width="100"/>
                <el-table-column label="状态" width="100" align="center">
                    <template v-slot="scope">  
                        <span :class="['ant-tag', scope.row.status === 1 ? 'ant-tag-green' : 'ant-tag-orange']">  
                            {{ scope.row.status === 1 ? '启用' : '禁用' }}  
                        </span>  
                    </template>  
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <el-pagination 
        v-model:page-size="page.size" 
        v-model:current-Page="page.current"
        @current-change="init"
        @size-change="init"
        :page-sizes="[5, 10, 15]" 
        layout="total, prev, pager, next, sizes" 
        :total="page.total" 
        style="float: right;margin-top: 10px;">
        </el-pagination>
        <!-- 弹框 -->
        <el-dialog
            :title="title"
            v-model="visible"
            width="50%"
            top="20vh"
            :destroy-on-close="true">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import request from '@/api/request'
import { ElMessage } from 'element-plus';

let visible = ref(false)
let title = ref("")
let data = ref({})
let page = ref([])
let customerIds = ref([])
let customer = ref({
    supType: 1
})

//多选值
let multipleSelection = ref([])

//获取多选的值转入multipleSelection中
let handleSelectionChange =(val)=>{
    multipleSelection.value = val;
    customerIds.value = val.map(item => item.supId);
}

//关闭删除框
let clicked = ref(false)
function onCancel() {
  clicked.value = true
}

//初始数据
let init = () =>{
    request({
        url:'/basic/vendor/find',
        method: "get",
        params: {
            current: page.value.current,
            size: page.value.size,
            ...customer.value
        }
    }).then(res => {
        page.value = res.data
    })
}
init();

//关闭弹出框
let close = ()=>{
    init();
    visible.value = false;
}

//弹出新增页面
let insert = (menu)=>{
    title.value = menu.cname
    visible.value = true;
    router.push(menu.path)
}

//弹出修改页面
let update = (menu,row)=>{
    title.value = menu.cname
    visible.value = true;
    data.value = row
    router.push(menu.path)
}

//删除
let remove = (menu,row)=>{
    request.delete("/basic/vendor" + "/" + row.supId,{method:'DELETE'})
    .then(resp => {
        ElMessage.success(resp.data);
        init();
    });
}

//重置
let cz = () =>{
    customer.value = ({
        supType: 1
    })
    init();
}

//批量删除
let removes = () =>{
    if (customerIds.value.length === 0) {
        ElMessage.warning('请先选择至少一项记录');
        return;
    }
    request.post("/basic/vendor/batch", multipleSelection.value,{
        //method: 'POST', // 注意这里可能改为POST，因为DELETE通常不支持请求体
        body: JSON.stringify(multipleSelection.value), // 将请求体转换为JSON字符串  
        headers: {
            'Content-Type': 'application/json' // 设置正确的请求头  
        }  
    }).then(resp => {
        ElMessage.success(resp.data);
        init();
    })
}

//批量修改状态
let modifyTheState = (num) =>{
    if (customerIds.value.length === 0) {
        ElMessage.warning('请先选择至少一项记录');
        return;
    }
    request.put("/basic/vendor/modifyTheState", {
        ids : customerIds.value,
        status : num
    }).then(resp => {
        ElMessage.success(resp.data);
        init();
    })
}

</script>

<style scoped>
.ant-tag {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* color: rgba(0, 0, 0, .65); */
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    display: inline-block;
    height: auto;
    margin-right: 8px;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    /* background: #fafafa; */
    border: 1px solid;
    border-radius: 4px;
    cursor: default;
    opacity: 1;
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
}
.ant-tag-orange {
    color: #fa8c16;
    background: #fff7e6;
    border-color: #ffd591;
}

.ant-tag-green {
    color: #52c41a;
    background: #f6ffed;
    border-color: #b7eb8f;
}
.tou {
    float: left;
    position: relative;
    width: 100%;
}

.el-form-item {
    margin-right: 12px;
    vertical-align: middle;
}

a:active, a:hover {
    text-decoration: none;
    outline: 0;
}

a:hover {
    color: #40a9ff;
}

a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color .3s;
    -webkit-text-decoration-skip: objects;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.anticon svg {
    display: inline-block;
}

.ant-btn {
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    border-color: #d9d9d9;
}

.ant-btn:hover {
    color: #40a9ff;
    background-color: #fff;
    border-color: #40a9ff;
}

.ant-btn-primary {
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
}

.ant-btn-primary:focus, .ant-btn-primary:hover {
    color: #fff;
    background-color: #40a9ff;
    border-color: #40a9ff;
}

</style>
